.spectrum-ColorLoupe {
  width: calc(var(--spectrum-colorhandle-loupe-width, var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
  height: calc(var(--spectrum-colorhandle-loupe-height, var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);

  position: absolute;
  transform: translate(0, var(--spectrum-global-dimension-static-size-100, 8px));
  opacity: 0;
  transform-origin: bottom center;
  bottom: calc(50% + var(--spectrum-global-dimension-static-size-200, 16px));
  left: calc(50% - (var(--spectrum-colorhandle-loupe-width, var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2) / 2);
  transition: transform 100ms ease-in-out,
              opacity 125ms ease-in-out;

  pointer-events: none;
}

.spectrum-ColorLoupe.is-open {
    transform: translate(0, 0);
    opacity: 1;
  }

.spectrum-ColorLoupe-outer {
  stroke-width: var(--spectrum-colorhandle-loupe-outer-border-size, var(--spectrum-global-dimension-static-size-10));
}

.spectrum-ColorLoupe-outer {
  fill: var(--spectrum-colorhandle-loupe-inner-border-color, var(--spectrum-global-color-static-white));
  stroke: var(--spectrum-colorhandle-loupe-outer-border-color, rgba(50,50,50,0.1));
}
